<template>
  <div class="mini-wnd history-wnd" @mouseleave="hideHistoryList">
    <div class="top-login">
      <p>登录后有更多功能哦~</p>
      <a class="loginbtn" href="https://passport.bilibili.com/login">登录</a>
    </div>
    <ul class="list history">
      <li class="timeline">
        <span class="date">昨日</span>
      </li>
      <li>
        <a class="clearfix" href="//www.bilibili.com/video/av11251323" target="_blank" title="【官方双语】微积分的本质 - 10 - 泰勒级数">
          <div class="link">【官方双语】微积分的本质 - 10 - 泰勒级数</div>
        </a>
      </li>
      <li>
        <a class="clearfix" href="//www.bilibili.com/video/av11251323" target="_blank" title="【官方双语】微积分的本质 - 10 - 泰勒级数">
          <div class="link">【官方双语】微积分的本质 - 10 - 泰勒级数</div>
        </a>
      </li>
      <li>
        <a class="clearfix" href="//www.bilibili.com/video/av11251323" target="_blank" title="【官方双语】微积分的本质 - 10 - 泰勒级数">
          <div class="link">【官方双语】微积分的本质 - 10 - 泰勒级数</div>
        </a>
      </li>
    </ul>
    <a class="read-more" href="//www.bilibili.com/account/history" target="_blank">
      查看更多
      <i class="b-icon b-icon-arrow-r"></i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'historylist',
  data () {
    return {
      isShowHistoryList: false
    };
  },
  methods: {
    hideHistoryList () {
      this.$emit('isShowHistoryList', this.isShowHistoryList);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .mini-wnd
    display block
    position absolute
    left 0
    top 42px
    background-color #fff
    width 320px
    box-shadow rgba(0, 0, 0, 0.16) 0px 2px 4px
    border 1px solid #e5e9ef
    border-radius 0 0 4px 4px
    z-index 200
    a
      color #222
    &.history-wnd
      width 400px
      left -177px
      top 42px
      display block
  .top-login
    p
      font-size 14px
      color #222
      width 215px
      margin 0 auto 12px
      line-height normal
      text-align center
      padding-top 28px
    .loginbtn
      font-size 12px
      color #fff
      line-height normal
      text-align left
      background-color #00a1d6
      padding 5px 11px
      border-radius 4px
      margin 10px 63px 20px
      position relative
      z-index 201
  .list
    padding-top 10px
    li
      height 28px
      line-height 28px
      text-align left
      font-size 12px
      overflow hidden
      white-space nowrap
      padding 0 12px 0 22px
      position relative
      &:before
        content ""
        display block
        position absolute
        top 13px
        left 26px
        width 4px
        height 4px
        border-radius 2px
        background-color #6d757a
      a
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        display block
    .timeline
      clear both
      position relative
      color #99a2aa
      overflow visible
      height 0
      padding 0
      margin 10px 0
      border-top 1px solid #e5e9ef
      &:before
        display none
      .date
        background-color #fff
        position absolute
        top -6px
        left 0
        z-index 10
        padding 0 10px
        height 12px
        line-height 12px
  .read-more
    display block
    margin 4px 12px 12px
    background-color #e5e9ef
    text-align center
    border 1px solid #e0e6ed
    height 22px
    line-height 22px
    color #222
    border-radius 4px
  .history
    li
      clear both
      position relative
      padding-left 38px
  .b-icon
    display inline-block
    vertical-align middle
    width 12px
    height 12px
    background url(../../../static/images/icons.d895b84.png) no-repeat;
    &.b-icon-arrow-r
      background-position -478px -218px
      width 6px
      height 12px
      margin -2px 0 0 5px
</style>
